<template>
  <div>
    <div style="font-size:14px;font-weight:600;margin-bottom:10px;margin-top:-5px;">监控总览</div>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            CPU监控信息
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="33%">主机名</th>
                  <th width="33%">核心数(核)</th>
                  <th>使用率(%)</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in cpuList" v-bind:key="item.id">
                  <td width="33%" align="center">{{item.appname}}</td>
                  <td width="33%" align="center">{{item.cores}}</td>
                  <td align="center">
                    <!-- {{item.usedPercent}} -->
                    <el-progress v-if="item.usedPercent<90" :percentage="item.usedPercent" />
                    <el-progress v-if="item.usedPercent >90" color="#f56c6c" :percentage="item.usedPercent" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            内存监控信息
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="33%">主机名</th>
                  <th width="33%">内存(GB)</th>
                  <th>使用率(%)</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in memList" v-bind:key="item.id">
                  <td width="33%" align="center">{{item.appname}}</td>
                  <td width="33%" align="center">{{item.total}}</td>
                  <td align="center">
                    <!-- {{item.usedPercent}} -->
                    <el-progress v-if="item.usedPercent<90" :percentage="item.usedPercent" />
                    <el-progress v-if="item.usedPercent >90" color="#f56c6c" :percentage="item.usedPercent" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            磁盘监控信息
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="33%">主机名</th>
                  <th width="33%">挂载点</th>
                  <th>使用率(%)</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in diskList" v-bind:key="item.id">
                  <td width="33%" align="center">{{item.appname}}</td>
                  <td width="33%" align="center">{{item.diskPart}}</td>
                  <td align="center">
                    <!-- {{item.usedPercent}} -->
                    <el-progress v-if="item.usedPercent<90" :percentage="item.usedPercent" />
                    <el-progress v-if="item.usedPercent >90" color="#f56c6c" :percentage="item.usedPercent" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top:15px;">
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            采集主机状态
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="33%">主机名</th>
                  <th width="33%">Ping状态</th>
                  <th>采集状态</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in appList" v-bind:key="item.id">
                  <td width="33%" align="center">{{item.appname}}</td>
                  <td width="33%" align="center">
                    <!-- {{item.status}} -->
                    <status-success v-if="item.status==1"></status-success>
                    <status-error v-if="item.status==2"></status-error>
                  </td>
                  <td align="center">
                    <!-- {{item.nodeStatus}} -->
                    <status-success v-if="item.nodeStatus==1"></status-success>
                    <status-error v-if="item.nodeStatus==2"></status-error>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            告警记录
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="20%" >告警ID</th>
                  <th width="30%">告警时间</th>
                  <th>事件</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in warnList" v-bind:key="item.id">
                  <td width="20%" align="center">{{item.id}}</td>
                  <td width="35%" align="center">{{item.createDate}}</td>
                  <td v-if="item.event.length>28">主机【{{item.appname}}】 {{item.event.slice(0,28)}}...</td>
                  <td v-if="item.event.length<28">主机【{{item.appname}}】 {{item.event}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="card_header">
            已处理记录
          </div>
          <div class="card_content">
            <div style="table_title">
              <table class="table">
                <tr>
                  <th width="20%" >告警ID</th>
                  <th width="30%">告警时间</th>
                  <th>事件</th>
                </tr>
              </table>
            </div>
            <div class="table_content">
              <table class="table">
                <tr v-for="item in warnFinishList" v-bind:key="item.id">
                  <td width="20%" align="center">{{item.id}}</td>
                  <td width="35%" align="center">{{item.createDate}}</td>
                  <td v-if="item.event.length>28">主机【{{item.appname}}】 {{item.event.slice(0,28)}}...</td>
                  <td v-if="item.event.length<28">主机【{{item.appname}}】 {{item.event}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import http from '../utils/request'
import StatusError from './components/status-error.vue'
import statusSuccess from './components/status-success.vue'
export default {
  components: { statusSuccess,StatusError },
  data(){
    return{
      cpuList:[],
      memList:[],
      diskList:[],
      timer: "",
      warnList:[],
      warnFinishList:[],
      appList:[],
      warnVisible:false,
      warnObj:{
          appname:'',
          innerIp:'',
          outerIp:'',
          event:'',
          status:'1'
      },
    }
  },
  mounted(){
      this.$nextTick(() => {
          this.getHomeData();
          this.getWarnList();
          this.getWarnFinishList();
          this.getAppList();
          this.timer = setInterval(this.autoFresh, 5000);
      })
  },
  methods:{
    autoFresh(){
        this.getHomeData();
        this.getWarnList();
        this.getWarnFinishList();
        this.getAppList();
    },
    getAppList(){
        var that = this
        http.get(window.SITE_CONFIG['apiURL']+'/api/app/list')
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.appList = res.data;
        }).catch(() => {})
    },
    getHomeData(){
        var that = this
        http.get(window.SITE_CONFIG['apiURL']+'/api/home/data')
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            // console.log(res.data)
            this.cpuList = res.data.cpuList;
            this.memList = res.data.memList;
            this.diskList = res.data.diskList;
        }).catch(() => {})
    },
    getWarnList(){
        http.get(window.SITE_CONFIG['apiURL']+'/api/warn/list?status=1')
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.warnList = res.data;
        }).catch(() => {})
    },
    getWarnFinishList(){
        http.get(window.SITE_CONFIG['apiURL']+'/api/warn/list?status=2')
        .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.warnFinishList = res.data;
        }).catch(() => {})
    },
    handle(warnObj){
        // console.log(warnObj)
        this.warnVisible = true;
        this.warnObj = warnObj;
        this.warnObj.status = this.warnObj.status+''
    },
    submit(formName){
        this.$refs[formName].validate((valid) => {
            if (!valid) {
                return false;
            } else {
                // console.log(this.warnObj)
                this.warnObj.status = parseInt(this.warnObj.status);
                http.post(window.SITE_CONFIG['apiURL']+'/api/warn/update',this.warnObj)
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.getWarnList();
                    this.getWarnFinishList();
                    this.warnVisible = false;
                }).catch(() => {})
            }
        });
    },
    gotowarn(){
        this.$router.push('/warnsetting/warnsetting2')
    }
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
}
</script>
<style scoped>
.card{
  width:100%;
  background-color: #fff;
  /* -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0/10%)!important; */
  /* box-shadow: 0 2px 12px 0 rgb(0 0 0/10%)!important; */
  /* border-radius: 3px; */
  border:1px solid #adb0b8;
}

.card:hover{
  border:1px solid #526ECC;
  box-shadow: 1px 2px 6px 0 rgb(0 0 0/10%)!important;
}

.card_header{
  padding: 5px 5px 0 5px;
  /* border-bottom: 1px solid #cdcdcd; */
  font-size:12px;
  font-weight: 600;
  padding-left:10px;
}

.card_content{
  padding:5px;
}

.table_title{
}

.table_content{
  height: 266px;
  overflow-y: auto;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table tr{
  border-bottom: 1px solid #efefef;
}

.table tr:hover{
  background-color: #efefef;
}

.table th{
  background-color: #f2f5fc;
  line-height: 24px;
  border-bottom: 1px solid #dfe1e6;
  color:#303133;
  font-weight: 600;
  padding-top:3px;padding-bottom: 3px;
}

.table td{
  line-height: 24px;
  border-bottom: 1px solid #dfe1e6;
  /* width:33%; */
  padding-left:5px;
  padding-right:5px;
  /* line-height: 30px; */
  padding-top:4px;padding-bottom: 4px;
}
</style>